<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Home</title>
	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
	<link rel="stylesheet" href="assets/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i">
	<link rel="stylesheet" href="assets/css/ready.css">
	<link rel="stylesheet" href="assets/css/demo.css">
</head>
<body>
	<div class="wrapper">
		<div class="main-header">
			<div class="logo-header">
				<a href="index.html" class="logo">
					Ready Dashboard
				</a>
				<button class="navbar-toggler sidenav-toggler ml-auto" type="button" data-toggle="collapse" data-target="collapse" aria-controls="sidebar" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>
				<button class="topbar-toggler more"><i class="la la-ellipsis-v"></i></button>
			</div>
			<nav class="navbar navbar-header navbar-expand-lg">
				<div class="container-fluid">
					
					<form class="navbar-left navbar-form nav-search mr-md-3" action="">
						<div class="input-group">
							<input type="text" placeholder="Search ..." class="form-control">
							<div class="input-group-append">
								<span class="input-group-text">
									<i class="la la-search search-icon"></i>
								</span>
							</div>
						</div>
					</form>
					<ul class="navbar-nav topbar-nav ml-md-auto align-items-center">
						<li class="nav-item dropdown hidden-caret">
							<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<i class="la la-envelope"></i>
							</a>
							<div class="dropdown-menu" aria-labelledby="navbarDropdown">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">Something else here</a>
							</div>
						</li>
						<li class="nav-item dropdown hidden-caret">
							<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<i class="la la-bell"></i>
								<span class="notification">3</span>
							</a>
							<ul class="dropdown-menu notif-box" aria-labelledby="navbarDropdown">
								<li>
									<div class="dropdown-title">You have 4 new notification</div>
								</li>
								<li>
									<div class="notif-center">
										<a href="#">
											<div class="notif-icon notif-primary"> <i class="la la-user-plus"></i> </div>
											<div class="notif-content">
												<span class="block">
													New user registered
												</span>
												<span class="time">5 minutes ago</span> 
											</div>
										</a>
										<a href="#">
											<div class="notif-icon notif-success"> <i class="la la-comment"></i> </div>
											<div class="notif-content">
												<span class="block">
													Rahmad commented on Admin
												</span>
												<span class="time">12 minutes ago</span> 
											</div>
										</a>
										<a href="#">
											<div class="notif-img"> 
												<img src="assets/img/profile2.jpg" alt="Img Profile">
											</div>
											<div class="notif-content">
												<span class="block">
													Reza send messages to you
												</span>
												<span class="time">12 minutes ago</span> 
											</div>
										</a>
										<a href="#">
											<div class="notif-icon notif-danger"> <i class="la la-heart"></i> </div>
											<div class="notif-content">
												<span class="block">
													Farrah liked Admin
												</span>
												<span class="time">17 minutes ago</span> 
											</div>
										</a>
									</div>
								</li>
								<li>
									<a class="see-all" href="javascript:void(0);"> <strong>See all notifications</strong> <i class="la la-angle-right"></i> </a>
								</li>
							</ul>
						</li>
						<li class="nav-item dropdown">
							<a class="dropdown-toggle profile-pic" data-toggle="dropdown" href="#" aria-expanded="false"> <img src="assets/img/fangzebin.jpg" alt="user-img" width="36" class="img-circle"><span >方泽斌</span></span> </a>
							<ul class="dropdown-menu dropdown-user">
								<li>
									<div class="user-box">
										<div class="u-img"><img src="assets/img/fangzebin.jpg" alt="user"></div>
										<div class="u-text">
											<h4>方泽斌</h4>
											<p class="text-muted">hello@themekita.com</p><a href="一.html" class="btn btn-rounded btn-danger btn-sm">View Profile</a></div>
										</div>
									</li>
									<div class="dropdown-divider"></div>
									<a class="dropdown-item" href="https://fang_se_bin.gitee.io/curriculum_vitae/"><i class="ti-user"></i> 我的简历</a>
									<a class="dropdown-item" href="https://fang_se_bin.gitee.io/fangzebin/"></i> 我的博客</a>
									<a class="dropdown-item" href="index.html"><i class="fa fa-power-off"></i> 登出</a>
								</ul>
								<!-- /.dropdown-user -->
							</li>
						</ul>
					</div>
				</nav>
			</div>
			<div class="sidebar">
				<div class="scrollbar-inner sidebar-wrapper">
					<div class="user">
						<div class="photo">
							<img src="assets/img/fangzebin.jpg">
						</div>
						<div class="info">
							<a class="" data-toggle="collapse" href="#collapseExample" aria-expanded="true">
								<span>
									方泽斌
									<span class="user-level">Administrator</span>
									<span class="caret"></span>
								</span>
							</a>
							<div class="clearfix"></div>

							<div class="collapse in" id="collapseExample" aria-expanded="true" style="">
								<ul class="nav">
									<li>
										<a href="https://fang_se_bin.gitee.io/curriculum_vitae/">
											<span class="link-collapse">我的简历</span>
										</a>
									</li>
									<li>
										<a href="https://fang_se_bin.gitee.io/fangzebin/">
											<span class="link-collapse">我的博客</span>
										</a>
									</li>
									<li>
										<a href="index.html">
											<span class="link-collapse">登出</span>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<ul class="nav">
						<li class="nav-item active">
							<a href="一.html">
								<i class="la la-dashboard"></i>
								<p>数据总故事</p>
								<span class="badge badge-count">5</span>
							</a>
						</li>
						<li class="nav-item">
							<a href="二.html">
								<i class="la la-table"></i>
								<p>年末常住人口</p>
								<span class="badge badge-count">14</span>
							</a>
						</li>
						<li class="nav-item">
							<a href="三.html">
								<i class="la la-keyboard-o"></i>
								<p>出生率与死亡率</p>
								<span class="badge badge-count">50</span>
							</a>
						</li>
						<li class="nav-item">
							<a href="四.html">
								<i class="la la-th"></i>
								<p>平均年工资</p>
								<span class="badge badge-count">6</span>
							</a>
						</li>
						<li class="nav-item">
							<a href="五.html">
								<i class="la la-bell"></i>
								<p>自然灾害</p>
								<span class="badge badge-success">3</span>
							</a>
						</li>
						<li class="nav-item">
							<a href="六.html">
								<i class="la la-font"></i>
								<p>总结与建议</p>
								<span class="badge badge-danger">25</span>
							</a>
                        </li>
                        <li class="nav-item update-pro">
							<button  data-toggle="modal" data-target="#modalUpdate">
								<i class="la la-hand-pointer-o"></i>
                                    <p>Update to pro</p>
							</button>
						</li>
						<li class="nav-item">
							<a href="https://gitee.com/fang_se_bin/python-final-project">
								<i class="la la-fonticons"></i>
								<p>技术文档</p>
							</a>
                        </li>
                        <li class="nav-item">
							<a href="https://data.stats.gov.cn/index.htm">
								<i class="la la-fonticons"></i>
								<p>数据来源</p>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="main-panel">
				<div class="content">
					<div class="container-fluid">
						<h2 class="page-title">就业所在地选择参考</h2>
                        <span id="stats_traffic" class="h4 font-weight-bold mb-0">从年末常住总人口，受灾面积、地震多发受灾次数、出生率与死亡率、以及城镇单位的就业人员平均年工资等几个方面来为应届大学毕业生选择就业所在地提供参考依据</span>
                    </div>
                    <p class="mt-3 mb-0 text-muted text-sm">
                    </p>
                    </div>
                  <!-- Page content -->
      <div class="container-fluid mt--0">
        <div class="row">
          <div class="col-xl-0 mb-0 mb-xl-0">
            <div class="card shadow">

              <div class="card-body">
  
  
                <div style="height: 100%;width: 200%">
                    <!DOCTYPE html><!--年末常住人口-->
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
            <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>

</head>
<body>
    <div id="cc1fdb8072dd4c3e88600f93264434c6" class="chart-container" style="width:750px; height:600px;"></div>
    <script>
        var chart_cc1fdb8072dd4c3e88600f93264434c6 = echarts.init(
            document.getElementById('cc1fdb8072dd4c3e88600f93264434c6'), 'white', {renderer: 'canvas'});
        var option_cc1fdb8072dd4c3e88600f93264434c6 = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "color": [
        "#1fa2ff",
        "#45b1ff",
        "#7dc9ff",
        "#33dbff",
        "#6de5ff",
        "#329e71",
        "#45b888",
        "#3dd395",
        "#3dd395",
        "#3dd395",
        "#3dd395"
    ],
    "series": [
        {
            "type": "pie",
            "clockwise": true,
            "data": [
                {
                    "name": "\u5e7f\u4e1c\u7701",
                    "value": 11169
                },
                {
                    "name": "\u5c71\u4e1c\u7701",
                    "value": 10006
                },
                {
                    "name": "\u6cb3\u5357\u7701",
                    "value": 9559
                },
                {
                    "name": "\u6c5f\u82cf\u7701",
                    "value": 8029
                },
                {
                    "name": "\u6cb3\u5317\u7701",
                    "value": 7520
                },
                {
                    "name": "\u8fbd\u5b81\u7701",
                    "value": 4369
                },
                {
                    "name": "\u9ed1\u9f99\u6c5f\u7701",
                    "value": 3789
                },
                {
                    "name": "\u4e0a\u6d77\u5e02",
                    "value": 2418
                },
                {
                    "name": "\u5317\u4eac\u5e02",
                    "value": 2171
                },
                {
                    "name": "\u5929\u6d25\u5e02",
                    "value": 1557
                }
            ],
            "radius": [
                "36%",
                "100%"
            ],
            "center": [
                "50%",
                "60%"
            ],
            "roseType": "area",
            "label": {
                "show": true,
                "position": "inside",
                "margin": 8,
                "fontSize": 18,
                "fontStyle": "italic",
                "fontWeight": "bold",
                "fontFamily": "Microsoft YaHei",
                "formatter": "{b}:{c}\u4e07\u4eba"
            },
            "rippleEffect": {
                "show": true,
                "brushType": "stroke",
                "scale": 2.5,
                "period": 4
            }
        }
    ],
    "legend": [
        {
            "data": [
                "\u5e7f\u4e1c\u7701",
                "\u5c71\u4e1c\u7701",
                "\u6cb3\u5357\u7701",
                "\u6c5f\u82cf\u7701",
                "\u6cb3\u5317\u7701",
                "\u8fbd\u5b81\u7701",
                "\u9ed1\u9f99\u6c5f\u7701",
                "\u4e0a\u6d77\u5e02",
                "\u5317\u4eac\u5e02",
                "\u5929\u6d25\u5e02"
            ],
            "selected": {},
            "show": false,
            "padding": 5,
            "itemGap": 10,
            "itemWidth": 25,
            "itemHeight": 14
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0
    },
    "title": [
        {
            "text": "2019\u5e74",
            "subtext": "\u5e74\u672b\u5e38\u4f4f\u4eba\u53e3",
            "left": "center",
            "right": "center",
            "top": "53%",
            "bottom": "center",
            "textStyle": {
                "color": "#0085c3",
                "fontSize": 25
            },
            "subtextStyle": {
                "color": "#003399",
                "fontSize": 30
            }
        }
    ],
    "toolbox": {
        "show": true,
        "orient": "horizontal",
        "itemSize": 15,
        "itemGap": 10,
        "left": "80%",
        "feature": {
            "saveAsImage": {
                "show": true,
                "title": "save as image",
                "type": "png"
            },
            "restore": {
                "show": true,
                "title": "restore"
            },
            "dataView": {
                "show": true,
                "title": "data view",
                "readOnly": false
            },
            "dataZoom": {
                "show": true,
                "title": {
                    "zoom": "data zoom",
                    "back": "data zoom restore"
                }
            }
        }
    }
};
        chart_cc1fdb8072dd4c3e88600f93264434c6.setOption(option_cc1fdb8072dd4c3e88600f93264434c6);
    </script>
</body>
</html>

</div>
</div>
</div>
</div>
        <div class="col-xl-4">
          <div class="card shadow">
            <div class="card-header bg-transparent">
              <div class="row align-items-center">
                <div class="col">
                  <h6 class="text-uppercase text-muted ls-1 mb-1">故事的开始</h6>
                  <h2 class="mb-0">年末常住人口</h2>
                </div>
              </div>
            </div>
            <div class="card-body">
              <!-- Chart -->
              <div style="height: 100%;width: 100%">
                <h4>2019年</h4>
                <h4>年末常住人口</h4>
                <p> 1.2019年年末常住人口排名第一的是广东省，为11169万人，可以看出广东省还是很有吸引力的，吸引了大批的人前往迁移入户广东，大多追求自我发展的年轻人都有向广东省迁移奋斗的冲动</p>
                <p>2.2019年年末常住人口最少的省份是黑龙江省，年末常住人口为3789万人，黑龙江省位于我国的最北部，气候寒冷，对于人们还不是很具有吸引力，所以年末常住人口比起其他省份来说较少</p>
                <p>3.2019年，上海市在直辖市中的年末常住人口最多，为2418万人，其中也不难推测其中原因，上海市是我国的国际经济、金融、贸易、航运、科技创新中心，从中我们可以看出上海市2019的发展程度以及受欢迎程度都是比较好的</p>
              </div>
            </div>
          </div>
        </div>
	  </div>
	  

	  <div class="container-fluid mt--0">
        <div class="row">
          <div class="col-xl-0 mb-0 mb-xl-0">
            <div class="card shadow">

              <div class="card-body">
  
  
                <div style="height: 100%;width: 200%">
                    <!DOCTYPE html><!--受灾面积-->
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
            <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>

</head>
<body>
    <div id="06b99d123f3d4222a45b4b2a6ce56776" class="chart-container" style="width:750px; height:600px;"></div>
    <script>
        var chart_06b99d123f3d4222a45b4b2a6ce56776 = echarts.init(
            document.getElementById('06b99d123f3d4222a45b4b2a6ce56776'), 'white', {renderer: 'canvas'});
        var option_06b99d123f3d4222a45b4b2a6ce56776 = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "color": [
        "#c23531",
        "#2f4554",
        "#61a0a8",
        "#d48265",
        "#749f83",
        "#ca8622",
        "#bda29a",
        "#6e7074",
        "#546570",
        "#c4ccd3",
        "#f05b72",
        "#ef5b9c",
        "#f47920",
        "#905a3d",
        "#fab27b",
        "#2a5caa",
        "#444693",
        "#726930",
        "#b2d235",
        "#6d8346",
        "#ac6767",
        "#1d953f",
        "#6950a1",
        "#918597"
    ],
    "series": [
        {
            "type": "pie",
            "clockwise": true,
            "data": [
                {
                    "name": "\u6cb3\u5317\u7701",
                    "value": 1678
                },
                {
                    "name": "\u9655\u897f\u7701",
                    "value": 576.2
                },
                {
                    "name": "\u5185\u8499\u53e4\u81ea\u6cbb\u533a",
                    "value": 1280.3
                },
                {
                    "name": "\u8fbd\u5b81\u7701",
                    "value": 620.1
                },
                {
                    "name": "\u9752\u6d77\u7701",
                    "value": 57.9
                },
                {
                    "name": "\u7518\u8083\u7701",
                    "value": 701.3
                }
            ],
            "radius": [
                "40%",
                "65%"
            ],
            "center": [
                "50%",
                "50%"
            ],
            "label": {
                "show": true,
                "position": "top",
                "margin": 8,
                "formatter": "{b}: {c}"
            },
            "rippleEffect": {
                "show": true,
                "brushType": "stroke",
                "scale": 2.5,
                "period": 4
            }
        }
    ],
    "legend": [
        {
            "data": [
                "\u6cb3\u5317\u7701",
                "\u9655\u897f\u7701",
                "\u5185\u8499\u53e4\u81ea\u6cbb\u533a",
                "\u8fbd\u5b81\u7701",
                "\u9752\u6d77\u7701",
                "\u7518\u8083\u7701"
            ],
            "selected": {},
            "show": true,
            "left": "10%",
            "top": "8%",
            "orient": "horizontal",
            "padding": 5,
            "itemGap": 10,
            "itemWidth": 25,
            "itemHeight": 14
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0
    },
    "title": [
        {
            "text": "\u6d2a\u6d9d\u3001\u5c71\u4f53\u6ed1\u5761\u3001\u6ce5\u77f3\u6d41\u548c\u53f0\u98ce\u53d7\u707e\u9762\u79ef(\u5343\u516c\u9877)",
            "left": "center",
            "right": "center"
        }
    ]
};
        chart_06b99d123f3d4222a45b4b2a6ce56776.setOption(option_06b99d123f3d4222a45b4b2a6ce56776);
    </script>
</body>
</html>


</div>
</div>
</div>
</div>
        <div class="col-xl-4">
          <div class="card shadow">
            <div class="card-header bg-transparent">
              <div class="row align-items-center">
                <div class="col">
                  <h6 class="text-uppercase text-muted ls-1 mb-1">故事的发展</h6>
                  <h2 class="mb-0">受灾面积</h2>
                </div>
              </div>
            </div>
            <div class="card-body">
              <!-- Chart -->
              <div style="height: 100%;width: 100%">

                  <h4>2019年</h4>
                  <h4>不同省份受灾面积</h4>
                <p> 1.受洪涝、山体滑坡、泥石流和台风受灾面积影响最大的省份是河北省，这些受灾面积大的地区对于应届毕业生对于就业区域的选择有着很大的影响</p>
                <p>2.受洪涝、山体滑坡，泥石流和台风受灾面积影响最小的是青海省，可能与当地的地理位置有关，相比较于其他几个区域，受灾面积可能会相较比较小，应届毕业生选择就业所在地时，青海省是个不错的选择。</p>
                <p>3.河北省跟内蒙古自治区的受灾面积都在1000千公顷以上，可能是因为内蒙古自治区与河北省距离比较近，灾害来临时，相邻的省份可能会被危急到，应届毕业生选择就业区域时，跟内蒙古自治区相临近的省份需要留心一下。</p>
              </div>
            </div>
          </div>
        </div>
	  </div>
	  
	  <div class="container-fluid mt--0">
        <div class="row">
          <div class="col-xl-0 mb-0 mb-xl-0">
            <div class="card shadow">

              <div class="card-body">
  
  
                <div style="height: 100%;width: 200%">
					<!DOCTYPE html><!--受灾次数-->
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
            <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>

</head>
<body>
    <div id="5997a1fcb408456d91e9f13ae2d71fc6" class="chart-container" style="width:730px; height:600px;"></div>
    <script>
        var chart_5997a1fcb408456d91e9f13ae2d71fc6 = echarts.init(
            document.getElementById('5997a1fcb408456d91e9f13ae2d71fc6'), 'white', {renderer: 'canvas'});
        var option_5997a1fcb408456d91e9f13ae2d71fc6 = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "color": [
        "#c23531",
        "#2f4554",
        "#61a0a8",
        "#d48265",
        "#749f83",
        "#ca8622",
        "#bda29a",
        "#6e7074",
        "#546570",
        "#c4ccd3",
        "#f05b72",
        "#ef5b9c",
        "#f47920",
        "#905a3d",
        "#fab27b",
        "#2a5caa",
        "#444693",
        "#726930",
        "#b2d235",
        "#6d8346",
        "#ac6767",
        "#1d953f",
        "#6950a1",
        "#918597"
    ],
    "series": [
        {
            "type": "bar",
            "name": "\u9884\u8b66\u6b21\u6570",
            "data": [
                11,
                7,
                16,
                22,
                5
            ],
            "barCategoryGap": "20%",
            "label": {
                "show": true,
                "position": "top",
                "margin": 8
            }
        }
    ],
    "legend": [
        {
            "data": [
                "\u9884\u8b66\u6b21\u6570"
            ],
            "selected": {
                "\u9884\u8b66\u6b21\u6570": true
            },
            "show": true,
            "padding": 5,
            "itemGap": 10,
            "itemWidth": 25,
            "itemHeight": 14
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0
    },
    "xAxis": [
        {
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "gridIndex": 0,
            "inverse": false,
            "offset": 0,
            "splitNumber": 5,
            "minInterval": 0,
            "splitLine": {
                "show": false,
                "lineStyle": {
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            },
            "data": [
                "\u56db\u5ddd",
                "\u897f\u85cf\u81ea\u6cbb\u533a",
                "\u4e91\u5357",
                "\u65b0\u7586\u7ef4\u543e\u5c14\u81ea\u6cbb\u533a",
                "\u9752\u6d77\u7701"
            ]
        }
    ],
    "yAxis": [
        {
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "gridIndex": 0,
            "inverse": false,
            "offset": 0,
            "splitNumber": 5,
            "minInterval": 0,
            "splitLine": {
                "show": false,
                "lineStyle": {
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            }
        }
    ],
    "title": [
        {
            "text": "\u5730\u9707\u591a\u53d1\u5730\u533a\u53d7\u707e\u6b21\u6570",
            "left": "10%",
            "right": "50%"
        }
    ]
};
        chart_5997a1fcb408456d91e9f13ae2d71fc6.setOption(option_5997a1fcb408456d91e9f13ae2d71fc6);
    </script>
</body>
</html>

					

</div>
</div>
</div>
</div>
        <div class="col-xl-4">
          <div class="card shadow">
            <div class="card-header bg-transparent">
              <div class="row align-items-center">
                <div class="col">
                  <h6 class="text-uppercase text-muted ls-1 mb-1">故事的发展</h6>
                  <h3 class="mb-0">地震多发受灾次数</h3>
                </div>
              </div>
            </div>
            <div class="card-body">
              <!-- Chart -->
              <div style="height: 100%;width: 100%">

                  <h4>2019年</h2>
                  <h4>不同省份地震多发受灾次数</h4>
                 <p> 1.地震多发地区受灾次数概览：新疆维吾尔自治区的地震次数较多，人们可能认为我国的地震多发地可能即使四川了，但是，根据数据显示，新疆维吾尔自治区的受灾次数甚至超过了四川，因此对于此地的选择需要有强大的应急心理</p>
                 <p>2.在图中的五个省份中，地震发生的次数最少的是青海省，地震受灾次数为5，对于应届生而言，在这个5个省份里面，选择青海省是一个不错的选择</p>
                 <p>3.图表中的云南省是我国的一个南部城市，对于想对着我国南部城市作为自己的就业所在地的同学来说，云南是一个地震多发受灾次数比较高的地区，需要谨慎选择</p>
              </div>
            </div>
          </div>
        </div>
	  </div>
	  
	  <div class="container-fluid mt--7">
		<div class="row mt-4">
		  <div class="col-xl-6.5 mb-5 mb-xl-0">
			<div class="card shadow">
  
			  <div class="card-body">
  
  
				<div style="height: 100%;width: 100%">
                    <!DOCTYPE html>
                    <html> <!--出生率-->
                        <head>
                            <meta charset="UTF-8">
                            <title>Awesome-pyecharts</title>
                                    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
                        
                        </head>
                        <body>
                            <div id="4ecb727ff92d4b5895209467cb511a4e" class="chart-container" style="width:500px; height:500px;"></div>
                            <script>
                                var chart_4ecb727ff92d4b5895209467cb511a4e = echarts.init(
                                    document.getElementById('4ecb727ff92d4b5895209467cb511a4e'), 'white', {renderer: 'canvas'});
                                var option_4ecb727ff92d4b5895209467cb511a4e = {
                            "animation": true,
                            "animationThreshold": 1000,
                            "animationDuration": 1000,
                            "animationEasing": "cubicOut",
                            "animationDelay": 0,
                            "animationDurationUpdate": 100,
                            "animationEasingUpdate": "cubicOut",
                            "animationDelayUpdate": 0,
                            "color": [
                                "#c23531",
                                "#2f4554",
                                "#61a0a8",
                                "#d48265",
                                "#749f83",
                                "#ca8622",
                                "#bda29a",
                                "#6e7074",
                                "#546570",
                                "#c4ccd3",
                                "#f05b72",
                                "#ef5b9c",
                                "#f47920",
                                "#905a3d",
                                "#fab27b",
                                "#2a5caa",
                                "#444693",
                                "#726930",
                                "#b2d235",
                                "#6d8346",
                                "#ac6767",
                                "#1d953f",
                                "#6950a1",
                                "#918597"
                            ],
                            "series": [
                                {
                                    "type": "pie",
                                    "clockwise": true,
                                    "data": [
                                        {
                                            "name": "\u6cb3\u5317\u7701",
                                            "value": 2171
                                        },
                                        {
                                            "name": "\u9655\u897f\u7701",
                                            "value": 1557
                                        },
                                        {
                                            "name": "\u5185\u8499\u53e4\u81ea\u6cbb\u533a",
                                            "value": 7520
                                        },
                                        {
                                            "name": "\u8fbd\u5b81\u7701",
                                            "value": 4369
                                        },
                                        {
                                            "name": "\u9752\u6d77\u7701",
                                            "value": 3789
                                        },
                                        {
                                            "name": "\u7518\u8083\u7701",
                                            "value": 2418
                                        }
                                    ],
                                    "radius": [
                                        "0",
                                        "50%"
                                    ],
                                    "center": [
                                        "50%",
                                        "50%"
                                    ],
                                    "label": {
                                        "show": true,
                                        "position": "top",
                                        "margin": 4,
                                        "formatter": "{b}: {c}"
                                    },
                                    "rippleEffect": {
                                        "show": true,
                                        "brushType": "stroke",
                                        "scale": 2.5,
                                        "period": 0
                                    }
                                }
                            ],
                            "legend": [
                                {
                                    "data": [
                                        "\u6cb3\u5317\u7701",
                                        "\u9655\u897f\u7701",
                                        "\u5185\u8499\u53e4\u81ea\u6cbb\u533a",
                                        "\u8fbd\u5b81\u7701",
                                        "\u9752\u6d77\u7701",
                                        "\u7518\u8083\u7701"
                                    ],
                                    "selected": {},
                                    "show": true,
                                    "left": "5%",
                                    "top": "10%",
                                    "orient": "horizontal",
                                    "padding": 8,
                                    "itemGap": 10,
                                    "itemWidth": 20,
                                    "itemHeight": 14
                                }
                            ],
                            "tooltip": {
                                "show": true,
                                "trigger": "item",
                                "triggerOn": "mousemove|click",
                                "axisPointer": {
                                    "type": "line"
                                },
                                "textStyle": {
                                    "fontSize": 14
                                },
                                "borderWidth": 0
                            },
                            "title": [
                                {
                                    "text": "2019\u5e74\u4e0d\u540c\u7701\u51fa\u751f\u7387",
                                    "left": "center",
                                    "right": "center"
                                }
                            ]
                        };
                                chart_4ecb727ff92d4b5895209467cb511a4e.setOption(option_4ecb727ff92d4b5895209467cb511a4e);
                            </script>
                        </body>
                        </html>
                        
                                                        
                                  
                                  
                                                </div>
                                              </div>
                                            </div>
                                  
                                          </div>
                                          <div class="col-xl-6 mb-5 mb-xl-8">
                                            <div class="card shadow">
                                              <div class="card-body">
                                  
                                  
                                                <div style="height: 100%;width: 100%">
                                                    <!DOCTYPE html>
                        <html><!--死亡率-->
                        <head>
                            <meta charset="UTF-8">
                            <title>Awesome-pyecharts</title>
                                    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
                        
                        </head>
                        <body>
                            <div id="6cac22ceed474a448d151ccb4e747b15" class="chart-container" style="width:600px; height:500px;"></div>
                            <script>
                                var chart_6cac22ceed474a448d151ccb4e747b15 = echarts.init(
                                    document.getElementById('6cac22ceed474a448d151ccb4e747b15'), 'white', {renderer: 'canvas'});
                                var option_6cac22ceed474a448d151ccb4e747b15 = {
                            "animation": true,
                            "animationThreshold": 1000,
                            "animationDuration": 1000,
                            "animationEasing": "cubicOut",
                            "animationDelay": 0,
                            "animationDurationUpdate": 0,
                            "animationEasingUpdate": "cubicOut",
                            "animationDelayUpdate": 0,
                            "color": [
                                "#c23531",
                                "#2f4554",
                                "#61a0a8",
                                "#d48265",
                                "#749f83",
                                "#ca8622",
                                "#bda29a",
                                "#6e7074",
                                "#546570",
                                "#c4ccd3",
                                "#f05b72",
                                "#ef5b9c",
                                "#f47920",
                                "#905a3d",
                                "#fab27b",
                                "#2a5caa",
                                "#444693",
                                "#726930",
                                "#b2d235",
                                "#6d8346",
                                "#ac6767",
                                "#1d953f",
                                "#6950a1",
                                "#918597"
                            ],
                            "series": [
                                {
                                    "type": "pie",
                                    "clockwise": true,
                                    "data": [
                                        {
                                            "name": "\u6cb3\u5317\u7701",
                                            "value": 2171
                                        },
                                        {
                                            "name": "\u9655\u897f\u7701",
                                            "value": 1557
                                        },
                                        {
                                            "name": "\u5185\u8499\u53e4\u81ea\u6cbb\u533a",
                                            "value": 7520
                                        },
                                        {
                                            "name": "\u8fbd\u5b81\u7701",
                                            "value": 4369
                                        },
                                        {
                                            "name": "\u9752\u6d77\u7701",
                                            "value": 3789
                                        },
                                        {
                                            "name": "\u7518\u8083\u7701",
                                            "value": 2418
                                        }
                                    ],
                                    "radius": [
                                        "0",
                                        "50%"
                                    ],
                                    "center": [
                                        "50%",
                                        "50%"
                                    ],
                                    "label": {
                                        "show": true,
                                        "position": "top",
                                        "margin": 100,
                                        "formatter": "{b}: {c}"
                                    },
                                    "rippleEffect": {
                                        "show": true,
                                        "brushType": "stroke",
                                        "scale": 2.5,
                                        "period": 4
                                    }
                                }
                            ],
                            "legend": [
                                {
                                    "data": [
                                        "\u6cb3\u5317\u7701",
                                        "\u9655\u897f\u7701",
                                        "\u5185\u8499\u53e4\u81ea\u6cbb\u533a",
                                        "\u8fbd\u5b81\u7701",
                                        "\u9752\u6d77\u7701",
                                        "\u7518\u8083\u7701"
                                    ],
                                    "selected": {},
                                    "show": true,
                                    "left": "1%",
                                    "top": "10%",
                                    "orient": "horizontal",
                                    "padding": 2,
                                    "itemGap": 10,
                                    "itemWidth": 30,
                                    "itemHeight": 14
                                }
                            ],
                            "tooltip": {
                                "show": true,
                                "trigger": "item",
                                "triggerOn": "mousemove|click",
                                "axisPointer": {
                                    "type": "line"
                                },
                                "textStyle": {
                                    "fontSize": 14
                                },
                                "borderWidth": 0
                            },
                            "title": [
                                {
                                    "text": "2019\u5e74\u4e0d\u540c\u7701\u6b7b\u4ea1\u7387",
                                    "left": "center",
                                    "right": "center"
                                }
                            ]
                        };
                                chart_6cac22ceed474a448d151ccb4e747b15.setOption(option_6cac22ceed474a448d151ccb4e747b15);
                            </script>
                        </body>
                        </html>

</div>
</div>
</div>
  </div>
  </div>

  <div class="row mt-0">
<div class="col-xl-0 container">
  <div class="card shadow">
	<div class="card-header bg-transparent">
	  <div class="row align-items-center">
		<div class="col">
		  <h6 class="text-uppercase text-muted ls-1 mb-1">故事的发展</h6>
		  <h2 class="mb-0">出生率和死亡率</h2>
		</div>
	  </div>
	</div>
	<div class="card-body">
	  <!-- Chart -->
      <div style="height: 100%;width: 100%">
        <h4>2019年</h2>
            <h4>出生率和死亡率</h4>
		  <p>1.2019年不同省出生率概览：内蒙古自治区的出生人口最多，经过调查分析得知其原因与其地广人稀的特性有关</p>
		  <p>2.2019年不同省死亡率概览：内蒙古自治区的死亡人口最多，死亡率与出生率通常成正相关，这样才能使这个省份的人口变化起伏平稳</p>
	  </div>
	</div>
  </div>
</div>

</div>


<html><!--平均工资-->
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
            <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>

</head>
<body>
    <div id="bf65c9a3834047f3bcc67b3635c9e383" class="chart-container" style="width:px; height:700px;"></div>
    <script>
        var chart_bf65c9a3834047f3bcc67b3635c9e383 = echarts.init(
            document.getElementById('bf65c9a3834047f3bcc67b3635c9e383'), 'white', {renderer: 'canvas'});
        var option_bf65c9a3834047f3bcc67b3635c9e383 = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 1000,
    "animationDurationUpdate": 2000,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 2000,
    "color": [
        "#c23531",
        "#2f4554",
        "#61a0a8",
        "#d48265",
        "#749f83",
        "#ca8622",
        "#bda29a",
        "#6e7074",
        "#546570",
        "#c4ccd3",
        "#f05b72",
        "#ef5b9c",
        "#f47920",
        "#905a3d",
        "#fab27b",
        "#2a5caa",
        "#444693",
        "#726930",
        "#b2d235",
        "#6d8346",
        "#ac6767",
        "#1d953f",
        "#6950a1",
        "#918597"
    ],
    "series": [
        {
            "type": "funnel",
            "name": "\u5143",
            "data": [
                {
                    "name": "\u5317\u4eac\u5e02",
                    "value": 131700
                },
                {
                    "name": "\u5929\u6d25\u5e02",
                    "value": 94534
                },
                {
                    "name": "\u4e0a\u6d77\u5e02",
                    "value": 129795
                },
                {
                    "name": "\u6cb3\u5357\u7701",
                    "value": 55495
                },
                {
                    "name": "\u91cd\u5e86\u5e02",
                    "value": 70889
                },
                {
                    "name": "\u5e7f\u4e1c\u7701",
                    "value": 79183
                },
                {
                    "name": "\u6d77\u5357\u7701",
                    "value": 67727
                },
                {
                    "name": "\u6cb3\u5317\u7701",
                    "value": 63036
                },
                {
                    "name": "\u5c71\u897f\u7701",
                    "value": 41501
                },
                {
                    "name": "\u5185\u8499\u53e4\u81ea\u6cbb\u533a",
                    "value": 66679
                }
            ],
            "sort": "descending",
            "gap": 0,
            "label": {
                "show": true,
                "position": "top",
                "margin": 100
            }
        }
    ],
    "legend": [
        {
            "data": [
                "\u6cb3\u5317\u7701",
                "\u91cd\u5e86\u5e02",
                "\u6d77\u5357\u7701",
                "\u5317\u4eac\u5e02",
                "\u5c71\u897f\u7701",
                "\u6cb3\u5357\u7701",
                "\u4e0a\u6d77\u5e02",
                "\u5929\u6d25\u5e02",
                "\u5e7f\u4e1c\u7701",
                "\u5185\u8499\u53e4\u81ea\u6cbb\u533a"
            ],
            "selected": {
                "\u5317\u4eac\u5e02": true,
                "\u5929\u6d25\u5e02": true,
                "\u4e0a\u6d77\u5e02": true,
                "\u6cb3\u5357\u7701": true,
                "\u91cd\u5e86\u5e02": true,
                "\u5e7f\u4e1c\u7701": true,
                "\u6d77\u5357\u7701": true,
                "\u6cb3\u5317\u7701": true,
                "\u5c71\u897f\u7701": true,
                "\u5185\u8499\u53e4\u81ea\u6cbb\u533a": true
            },
            "show": true,
            "left": "15%",
            "top": "4%",
            "orient": "horizontal",
            "padding": 5,
            "itemGap": 10,
            "itemWidth": 25,
            "itemHeight": 14
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0
    },
    "title": [
        {
            "text": "\u57ce\u9547\u5355\u4f4d\u5c31\u4e1a\u4eba\u5458\u5e73\u5747\u5de5\u8d44(\u5143)",
            "left": "center",
            "right": "center",
            "top": "0%"
        }
    ]
};
        chart_bf65c9a3834047f3bcc67b3635c9e383.setOption(option_bf65c9a3834047f3bcc67b3635c9e383);
    </script>
</body>
</html>



								<div class="row mt-100">
									<div class="col-xl-100 container">
									  <div class="card shadow">
										<div class="card-header bg-transparent">
										  <div class="row align-items-center">
											<div class="col">
											  <h6 class="text-uppercase text-muted ls-1 mb-1">故事的发展</h6>
											  <h2 class="mb-0">城镇单位就业人员平均年工资：</h2>
											</div>
										  </div>
										</div>
										<div class="card-body">
										  <!-- Chart -->
                                          <div style="height: 100%;width: 100%">
                                            <h4>2019年</h2>
                                            <h4>城镇单位就业人员平均年工资</h4>
											<p>1.从图表中我们可以看出就业人员平均工资位列第一的是北京市，为131700元，从中可以反映出北京的薪资待遇水平还是很高的，当然，北京对于人才的要求还是很高的，技能过硬的应届毕业生可以考虑挑战一下北京的岗位</p>
											<p>2.单位就业人员平均工资仅次于北京的是上海市，为129795元，虽然比北京的薪资待遇相差了一万多远，但薪资待遇相比于其他的省市还是挺高的，同样，上海这个地区对于人才的要求要是非常高的，技能过硬的应届毕业生可以考虑挑战一下上海的岗位</p>
											<p>3.薪资水平最低的是山西省，为41501元，大概每个月下来就是3000元左右，对于薪资待遇方面有硬性要求的应届毕业生想要去山西省就得需要考虑一下，对于薪资方面没有硬性要求，想继续在就业所在地提升自己的，山西省是个不错的选择</p>
										  </div>
										</div>
									  </div>
									</div>
							
                                  </div>
                                  <!-- Page content -->
			  <div class="container-fluid mt--7">
				<div class="row mt-4">
				  <div class="col-xl-500 mb-0 mb-xl-100">
					<div class="card shadow">
		  
					  <div class="card-body">
		  
		  
						<div style="height: 100%;width: 100%">
			<div class="row mt-0">
				<div class="col-xl-100 container">
				  <div class="card shadow">
					<div class="card-header bg-transparent">
					  <div class="row align-items-center">
						<div class="col">
						  <h6 class="text-uppercase text-muted ls-1 mb-1">故事的总结</h6>
						  <h2 class="mb-0">总结与建议</h2>
						</div>
					  </div>
					</div>
					<div class="card-body">
					  <!-- Chart -->
					  <div style="height: 100%;width: 100%">
						<h4>2019年</h2>
							<h2>应届毕业生就业地选择数据故事总结</h2>
							
						<h4>1.首页由近期的毕业季看到应届毕业生的就业之艰难，由此延伸至对于毕业生而言，其中对于就业工作地的选择也尤为重要，因此有了对于各省份相关信息的数据分析的想法</h4>
						  
						<h4>2.本项目站在用户的角度考虑问题，他们最关系的数据无非是就业率、地区生产水平、人口密集程度、绿化建设、自然灾害的相关情况，因此此次数据分析的思路，就由这几个方面着手，为广大应届毕业生选择就业所在地提供参考</h4>
					  </div>
					</div>
				  </div>
				</div>
				
                </div>
</body>
<script src="assets/js/core/jquery.3.2.1.min.js"></script>
<script src="assets/js/plugin/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script src="assets/js/core/popper.min.js"></script>
<script src="assets/js/core/bootstrap.min.js"></script>
<script src="assets/js/plugin/chartist/chartist.min.js"></script>
<script src="assets/js/plugin/chartist/plugin/chartist-plugin-tooltip.min.js"></script>
<script src="assets/js/plugin/bootstrap-notify/bootstrap-notify.min.js"></script>
<script src="assets/js/plugin/bootstrap-toggle/bootstrap-toggle.min.js"></script>
<script src="assets/js/plugin/jquery-mapael/jquery.mapael.min.js"></script>
<script src="assets/js/plugin/jquery-mapael/maps/world_countries.min.js"></script>
<script src="assets/js/plugin/chart-circle/circles.min.js"></script>
<script src="assets/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js"></script>
<script src="assets/js/ready.min.js"></script>
<script src="assets/js/demo.js"></script>
</html>